<template>
	<div>
		<el-card shadow="hover" class="card_box">
			<el-form ref="queryStudent_form" :inline="true" :model="query_form" class="demo-form-inline" size="small">

				<el-form-item label="学院" prop="value">
					<el-cascader v-model="value" :options="options"
						:props="{ checkStrictly: true,value:'id',label:'name',children:'list' }" clearable>
					</el-cascader>
				</el-form-item>

				<el-form-item label="身份" prop="identity">
					<el-radio v-model="query_form.identity" label="0">学生</el-radio>
					<el-radio v-model="query_form.identity" label="1">教师</el-radio>
				</el-form-item>

				<el-form-item label="编号" prop="code">
					<el-input v-model="query_form.code" placeholder="学生学号/教师编号" clearable></el-input>
				</el-form-item>

				<el-form-item label="姓名" prop="name">
					<el-input v-model="query_form.name" placeholder="姓名" clearable></el-input>
				</el-form-item>

				<el-form-item label="性别" prop="sex">
					<el-radio v-model="query_form.sex" label="1">男</el-radio>
					<el-radio v-model="query_form.sex" label="2">女</el-radio>
					<el-radio v-model="query_form.sex" label="3">不限</el-radio>
				</el-form-item>


				<el-form-item>
					<el-button icon="el-icon-refresh" plain @click="reset('queryStudent_form')">重置</el-button>
					<el-button type="primary" icon="el-icon-search" plain @click="onSubmit">查询</el-button>
				</el-form-item>

			</el-form>
			<!--表格-->
			<el-table :data="query_table" stripe border style="width: 100%;height: 100%">
				<el-table-column prop="college" label="学院" width="180">
				</el-table-column>
				<el-table-column prop="category" label="专业" width="180">
				</el-table-column>
				<el-table-column prop="uclass" label="班级">
				</el-table-column>
				<el-table-column prop="code" label="编号">
				</el-table-column>
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="sex" label="性别">
				</el-table-column>
			</el-table>

			<!--分页-->
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size"
				layout="total, prev, pager, next" :total="total">
			</el-pagination>

		</el-card>
	</div>
</template>

<script>
	import {
		getAllCollege,
		getUsers
	} from '../../../api/system.js'
	export default {
		name: "QueryStudent",

		data() {
			return {
				total: 0,
				size: 7,
				currentPage: 1,
				value: [0, 0, 0], //学院、专业、班级的数组
				query_form: {
					college: '', //学院
					category: '', //专业
					uclass: '', //班级
					code: '', //学号
					name: '', //姓名
					sex: '3', //性别
					identity: '0', //身份
				},
				query_table: [{
					college: '',
					category: '',
					uclass: '',
					code: '',
					name: '',
					sex: ''
				}],
				options: [{
					id: '1',
					name: '1',
					list: [{
						id: '2',
						name: '2',
						list: [{
							id: '3',
							name: '3',
							list: []
						}]
					}]
				}],
			}
		},
		methods: {
			queryStudentByPage(value) {

				this.query_form.uclass = this.value[2];
				this.query_form.category = this.value[1];
				this.query_form.college = this.value[0];

				this.query_form.uclass = this.query_form.uclass == undefined ? 0 : this.query_form.uclass;
				this.query_form.category = this.query_form.category == undefined ? 0 : this.query_form.category;
				this.query_form.college = this.query_form.college == undefined ? 0 : this.query_form.college;
				getUsers(this.query_form.college, this.query_form.category, this.query_form.uclass, this.query_form.code,
					this.query_form.name, this.query_form.sex, this.query_form.identity, value, this.size).then(
				res => {
					if (res.isok = true) {
						this.query_table = res.data1;
						this.total = res.data2;
					}
				})
				// this.$http.get("/user/users?collegeid=" + this.query_form.college + "&categoryid=" + this.query_form
				// 	.category + "&classid=" + this.query_form.uclass + "&code=" + this.query_form.code + "&name=" +
				// 	this.query_form.name +
				// 	"&sex=" + this.query_form.sex + "&identity=" + this.query_form.identity + "&current=" + value +
				// 	"&size=" + this.size).then(res => {
				// 	if (res.isok = true) {
				// 		this.query_table = res.data1;
				// 		this.total = res.data2;
				// 	}
				// });
			},
			onSubmit() {
				this.queryStudentByPage(1);
			},
			queryAllColleges() {
				getAllCollege().then(res => {
					if (res.isok = true) {
						this.options = res.data1;
					}
				});
			},
			handleCurrentChange(val) {
				this.queryStudentByPage(val);
			},
			reset(formName) {
				this.$refs[formName].resetFields();
			},
		},
		created() {
			this.queryAllColleges();
			this.queryStudentByPage(1);
		}
	}
</script>

<style scoped>
	.card_box {
		margin-top: 10px;
	}
</style>
